<template>
  <CalendarMonth ref="calendarMonthRef" v-intersection-observer="[onIntersectionObserver, { threshold: 0.01, immediate: true }]" v-bind="props" />
</template>

<script setup lang="ts">
import { vIntersectionObserver } from '@vueuse/components'
import CalendarMonth from 'vant/es/calendar/CalendarMonth'
import type { CalendarMonthProps } from 'vant/es/calendar/CalendarMonth'

const props = defineProps<CalendarMonthProps>()

const calendarMonthRef = ref()

function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
  calendarMonthRef.value.setVisible(isIntersecting)
}

defineExpose({
  calendarMonthRef,
  getTitle: () => calendarMonthRef.value?.getTitle(),
  getHeight: () => calendarMonthRef.value?.getHeight(),
  setVisible: (value?: boolean | undefined) => calendarMonthRef.value?.setVisible(value),
  scrollToDate: (body: Element, targetDate: Date) => calendarMonthRef.value?.scrollToDate(body, targetDate),
  disabledDays: computed(() => calendarMonthRef.value?.disabledDays.value),
})
</script>
